<template>
	<view>
		<view class="top">
			<input type="text" v-model="text"/>
		</view>
		<scroll-view scroll-y :style="{height: wh + 'px'}"  style="height:500px;">
			<view class="historyList" v-if="text.length == 0">
				<view class="title">
					<view>搜索历史</view>
					<view @click="sc">删除</view>
				</view>
				<view class="con">
					<view class="conItem" @click="searchItem(item)" v-for="(item,i) in Hlist" :key="i">{{item}}</view>
				</view>
			</view>
			<view class="searchList" v-else>
				<navigator class="searchItem" v-for="(item,i) in Slist" :key="i" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
					<view class="info">{{item.goods_name}}</view>
					<view class="rightButton">></view>
				</navigator>
			</view>
		</scroll-view>
	</view>
	
	<uni-popup ref="popup" type="dialog">
	   <uni-popup-dialog mode="base" title='您确定要删浏览记录吗？' :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				Hlist:['apple','app','a'],
				Slist:[],
				text:"",
				time:null,
				wh:0,
			};
		},
		onLoad(){
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
		},
		watch:{
			text(n){
				//防抖（数据延迟）
				clearTimeout(this.time)
				this.time = setTimeout(()=>{
					this.searchList(n)
				},500)
			}
		},
		methods:{
			searchList(i){
				if(i.length != 0){
					uni.$http.get("/api/public/v1/goods/qsearch",{query:i}).then(res=>{
						console.log(res);
						this.Slist = res.data.message;
						//新知识点1 解决关键词重复的问题
						const set = new Set(this.Hlist);
						set.delete(i);
						// set.add(i);
						//新知识点2 reverse()翻转
						this.Hlist = Array.from(set);
						this.Hlist.unshift(i)
					})
				}else{
					//网络延迟导致出现上一次的查询结果
					this.Slist = [];
				}
			},
			searchItem(i){
				this.text = i;
			},
			sc() {
			    this.$refs.popup.open()
			},
			   close() {
			    // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
			    // ...
			    this.$refs.popup.close();
			   },
			  
			   confirm(value) {
			    // 输入框的值
			    this.Hlist = []
			    // TODO 做一些其他的事情，手动执行 close 才会关闭对话框
			    // ...
			    this.$refs.popup.close()
			   }
		}
	}
</script>

<style lang="scss">
.top{
	padding:20rpx;
	background:red;
}
.top input{
	width:96%;
	height:70rpx;
	border-radius:50rpx;
	outline:none;
	background:#fff;
	padding:2%;
	font-size:36rpx;
}
.historyList .title{
	height:100rpx;
	line-height:100rpx;
	padding:0 30rpx;
	font-size: 36rpx;
	border:1px solid #dedede;
	display:flex;
	justify-content:space-between;
}
.con{
	display:flex;
	flex-wrap:wrap;
	padding:0 30rpx;
	.conItem{
		padding:10rpx 20rpx;
		border:1px solid #dedede;
		border-radius:10px;
		margin:10px;
	}
}
.searchItem{
	padding:0 30rpx;
	border:1px solid #dedede;
	height:100rpx;
	line-height:100rpx;
	display:flex;
	// flex-wrap:wrap;
	justify-content:space-between;
	.info{
		flex:1;
		padding-right:20rpx;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.rightButton{
		width:50rpx;
		text-align:center;
	}
}
</style>
